<template>
  <div>
    <van-popup v-model="show" style="background: none;">
      <div class="popup-box">
        <div class="title_box">
          <div class="title">{{ tipsInfo.title }}</div>
          <van-icon name="cross" @click="show = false" class="cross"/>
        </div>
        <div class="content">
          <div class="text"
               v-html="tipsInfo.description"></div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>

export default {
  props: {
    value: Boolean
  },
  data() {
    return {
      tipsInfo: {},
    }
  },
  computed: {
    show: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  watch:{
    show(show){
      if(show&&!this.tipsInfo.id){
        this.getTipsInfo()
      }
    }
  },
  methods: {
    jump() {
      this.$router.push('/welfare')
      this.show = false;
    },
    async getTipsInfo() {
      const url = this.URL.home.article
      const params = {categoryType: "TAXTIPS"}
      let {code, data} = await this.$post(url, params)
      if (code != 0) return;
      this.tipsInfo = data || {};
    },
  }
}
</script>

<style lang="less" scoped>
.popup-box {
  width: 6.2rem;
  //max-width: 96%;
  line-height: 1.3;
  background: #1b202d;
  padding: .32rem .32rem;
  border-radius: .4rem;
  .title_box {
    padding: 0 .32rem;
    position: relative;
    .title {
     padding: 0 .32rem;
      text-align: center;
      color: #fff;
      font-family: "PingFang SC";
      font-size: .36rem;
      font-weight: 600;
    }

    .cross {
      font-size: .32rem;
      color: #fff;
      font-weight: bold;
      cursor: pointer;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(0,-50%);
    }
  }

  .content {
    margin-top: .2rem;
    min-height: 3rem;
    max-height: 6rem;
    overflow-y: auto;
    .text {
      color: #c4c3c3;
      font-size: .28rem;
    }
  }

}
</style>